import React, { useState } from 'react';
import './CustomerService.css';

const CustomerService: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleToggleChat = () => {
    console.log('客服图标被点击，当前状态:', isOpen);
    alert('客服图标被点击了！'); // 添加alert来确认点击事件
    setIsOpen(!isOpen);
  };

  return (
    <div className="customer-service">
      {/* 客服图标 */}
      <div 
        className={`service-icon ${isOpen ? 'active' : ''}`}
        onClick={handleToggleChat}
        style={{ 
          cursor: 'pointer',
          border: '2px solid red', // 添加红色边框以便识别
          backgroundColor: isOpen ? '#fa8c16' : '#fff'
        }}
      >
        <div className="headset-icon">
          <div className="headset">
            <div className="earcup left"></div>
            <div className="earcup right"></div>
            <div className="band"></div>
          </div>
          <div className="microphone"></div>
          <div className="arrow">▼</div>
        </div>
        <span className="service-text">客服</span>
      </div>

      {/* 聊天窗口 */}
      {isOpen && (
        <div className="chat-window" style={{ border: '2px solid blue' }}>
          {/* 聊天头部 */}
          <div className="chat-header">
            <div className="chat-title">
              <div className="avatar">
                <div className="avatar-icon">👩‍💼</div>
              </div>
              <div className="title-info">
                <h3>包图网客服</h3>
                <span className="status online">在线</span>
              </div>
            </div>
            <button 
              className="close-btn"
              onClick={() => setIsOpen(false)}
            >
              ×
            </button>
          </div>

          {/* 消息列表 */}
          <div className="messages-container">
            <div className="message bot">
              <div className="message-content">
                <div className="message-text">您好！欢迎来到包图网，我是您的专属客服助手。请问有什么可以帮助您的吗？</div>
                <div className="message-time">14:30</div>
              </div>
            </div>
          </div>

          {/* 输入区域 */}
          <div className="input-area">
            <div className="input-container">
              <textarea
                placeholder="请输入您的问题..."
                rows={1}
                className="message-input"
              />
              <button className="send-btn">
                发送
              </button>
            </div>
            <div className="quick-actions">
              <button className="quick-btn">常见问题</button>
              <button className="quick-btn">联系人工</button>
              <button className="quick-btn">意见反馈</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default CustomerService; 